<template>
  <el-row>
    <el-col :span="24">
      <div class="box">
        <div class="box-header">
          <el-col :span="2">
            <h3 class="box-title" style="line-height: 40px;float: left;">参与培训</h3>
          </el-col>
          <el-col :span="22">
            <!-- <el-button class="btn-link-large add-btn" @click="Search()">
              <i class="el-icon-search el-icon--right"> 搜 索</i>
            </el-button> -->
          </el-col>
        </div>
        <!-- 一级菜单 -->
        <div class="box-body">
          <el-table
            :data="tableData"
            v-loading="loading"
            stripe
            style="width: 100%">
            <el-table-column type="index" label="#" width="50" ></el-table-column>
            <el-table-column prop="start_time" label="开始时间" sortable width="100"></el-table-column>
            <el-table-column prop="end_time" label="结束时间" sortable width="100"></el-table-column>
            <el-table-column prop="issue" label="培训期数" sortable width="100"></el-table-column>
            <el-table-column prop="level" label="培训级别" width="100"></el-table-column>
            <el-table-column prop="company" label="主办单位" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column prop="traindata_address" label="培训地点" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column prop="traindata_name" label="培训主题" show-overflow-tooltip></el-table-column>
            <el-table-column label="高校审核状态" width="150" fixed="right">
              <template scope="scope" >
                <el-tag type="warning" v-if="scope.row.status == 1" close-transition>待审核</el-tag>
                <el-tag type="success" v-if="scope.row.status == 2" close-transition>审核通过</el-tag>
                <el-tag type="danger" v-if="scope.row.status == 3" close-transition>审核失败</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="教育厅审核状态" width="150" fixed="right">
              <template scope="scope" >
                <el-tag type="warning" v-if="scope.row.status1 == 1" close-transition>待审核</el-tag>
                <el-tag type="success" v-if="scope.row.status1 == 2" close-transition>审核通过</el-tag>
                <el-tag type="danger" v-if="scope.row.status1 == 3" close-transition>审核失败</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="参与状态" fixed="right" width="100"
              :filters="[{ text: '参与成功', value: 2 }, { text: '参与失败', value: 3 }, { text: '待审核', value: 1 }]"
              :filter-method="filterTag"
              filter-placement="bottom-end">
              <template scope="scope" >
                <el-tag type="danger" v-if="(scope.row.status == 3 || scope.row.status1 == 3)" close-transition>参与失败</el-tag>
                <el-tag type="success" v-else-if="(scope.row.status == 2 && scope.row.status1 == 2)" close-transition>参与成功</el-tag>
                <el-tag type="warning" v-else close-transition>待审核</el-tag>
              </template>
            </el-table-column>
            <el-table-column>
              <el-table-column label="培训状态" width="150" fixed="right">
              <template scope="scope" >
                <el-button type="success" v-if="scope.row.grade === 1||scope.row.grade === 2" @click="credential()">结业证书</el-button>
                <el-tag type="danger" v-if="scope.row.grade == 3" close-transition>结业失败</el-tag>
              </template>
            </el-table-column>
            </el-table-column>
          </el-table>
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            layout="prev, pager, next"
            :page-count="total"
            style="float: right;"
          ></el-pagination>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import http from './../../../../assets/js/http'
export default {
  data () {
    return {
      currentPage: 1,
      total: 1,
      tableData: [],
      loading: true
    }
  },
  methods: {
    filterTag(value, row) {
      let cur = 1
      if (row.status == 3 || row.status1 == 3) {
        cur = 3
      } else if (row.status == 2 && row.status1 == 2) {
        cur = 2
      }
      return cur === value
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.getTable()
    },
    credential() {
      window.open('http://8.142.34.26:8097/php/uploads/html/credential.html?item=' + Lockr.get('userInfo').username)
    },
    getTable() {
      this.loading = true
      let data = {
        // page: this.currentPage,
        idnumber: Lockr.get('userInfo').username
      }
      this.apiPost("admin/Traindata/TraindataListtrain", data).then(res => {
        this.handelResponse(res, data => {
          console.log(res)
          this.tableData = res.data.data
          this.total = Math.ceil(data.total / data.per_page)
        })
        this.loading = false
      })
    }
  },
  created() {
    _g.closeGlobalLoading()
    this.getTable()
  },
  mixins: [http]
}

</script>
<style scoped>
.box {
  position: relative;
  border-radius: 3px;
  background: #fff;
  border-top: 3px solid #d2d6de;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border-top-color: #3c8dbc;
}
.box-body {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  padding: 10px;
  min-height: 0.01%;
  overflow-x: auto;
}
.box-header {
  height: 34px;
  line-height: 34px;
  color: #444;
  display: block;
  padding: 10px;
  position: relative;
}
.button-group {
  margin-left: 13px;
}
.pull-left {
  float: left;
}
.pull-right {
  float: right;
  /*margin-right: 50px;*/
}
.box-title {
  font-weight: 700;
  letter-spacing: 3px;
  display: inline-block;
  font-size: 18px;
  margin: 0;
}
.header-button {
  background-color: #3c8dbc;
  border-color: #367fa9;
}
.table-header {
  font-weight: bold;
}
.el-button--small {
  padding: 7px 9px;
}
.el-table .showwarn {
  background: oldlace;
}
.edit-btn {
  /*background: #367fa9;*/
  width: 60px;
  height: 28px;
}
.add-btn {
  background: #367fa9;
  margin: 0 10px;
}
.add-btn:hover {
  /* background: #367fa9; */
  background: #367fa9;
}
/*  .btn-link-large {
    padding: 13px 12px;
    font-size: 14px;
}*/
/* 选中某行时的背景色*/
.el-table__body tr.current-row > td {
  background-color: #92cbf1 !important;
}

/*鼠标移入某行时的背景色*/
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #92cbf1;
}
</style>

